import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Menu, Tooltip, Icon, Row, Col } from 'antd';
import { RIGHT } from '../../constants';
import StatisticsTask from './StatisticsTask';
import StatisticsChannel from './StatisticsChannel';
import StatisticsTaker from './StatisticsTaker';
import styles from './AlimamaOrder.less';
const SubMenu = Menu.SubMenu;

@connect(state => ({
  currentUser: state.user.currentUser,
  teamUsers: state.team.teamUsers,
}))

export default class TeamStatistics extends PureComponent {
  state = {
    currentKey: 'task',
  }
  handleDarenChange = (value) => {
    this.setState({ daren_id: value });
  }
  handleClick = (e) => {
    this.setState({
      currentKey: e.key,
    });
  }
  render() {
    const { currentUser } = this.props;
    const { currentKey } = this.state;
    const role = 'team';
    let content = currentKey;
    if (currentKey === 'task') {
      content = <StatisticsTask />
    } else if (currentKey === 'channel') {
      content = <StatisticsChannel />
    } else if (currentKey === 'taker') {
      content = <StatisticsTaker />
    }
    return (
      <div>
        <Card bodyStyle={{ paddingBottom: 0 }}>
          <Row gutter={20}>
            <Col span={12}>
              <Menu
                style={{ borderBottom: 'none', display: 'inline-block', verticalAlign: 'top' }}
                onClick={this.handleClick}
                selectedKeys={[this.state.currentKey]}
                mode="horizontal"
              >
                 <Menu.Item key="task">
                  文章
                </Menu.Item>
                <Menu.Item key="channel">
                  渠道
                </Menu.Item>
                <Menu.Item key="taker">
                  小编
                </Menu.Item>
              </Menu>
              <div style={{ display: 'inline-block', lineHeight: '46px', verticalAlign: 'top' }}>
                <Tooltip placement="top" title="已从尼采创作平台发布出去的稿子（包括保存到阿里创作平台草稿箱的和发布到阿里创作平台的）">
                  <Icon type="question-circle-o" style={{ marginLeft: 5 }} />
                </Tooltip>
              </div>
            </Col>
          </Row>
        </Card>

        <Card style={{ marginTop: 20 }}>
            {content}
        </Card>
      </div>
    );
  }
}
